<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>屈臣氏杨洋见面会直播</title>
    <meta name="description" content="12月3日下午3点，屈臣氏与你一起环抱暖杨洋，全景直播杨洋每一面" />
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .relative{position: relative}
        .bg{width: 100%;}
        .absolute{position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden;}
        #video-box{position: relative;}
        #video{width: 100%; height: auto;}
        #live-links{position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden;}
        .live-link{width: 50%; height: 100%; display: block}
        #ipt-cardnum,#ipt-cardnum:focus,#ipt-cardnum:hover{background: #fff; border: 0;}
        #jump-links{position:fixed;left: 15px; right: 15px; bottom:0;z-index: 999;}
        #btn-submit{position: absolute; top: 0;}
        #sleep1,
        #sleep2,
        #sleep3{overflow: inherit}
        .modal-alert .modal-backdrop{filter: alpha(opacity=80); opacity: 0.8; z-index: 0;position: absolute;}

        #sleep1 img{position: absolute; right: 5px;top: 0;}
        #sleep2 img{position: absolute; left: 5px; top: 5px;}
        #sleep3 img{position: absolute; right: 10px;}
        .sleep{
            display: none;
            -webkit-animation: go 1s ease-in-out alternate infinite;
            -moz-animation: go 1s ease-in-out alternate infinite;
            animation: go 1s ease-in-out alternate infinite;
            z-index: 10;
        }
        @keyframes go {
            0% {
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: top center;
                -moz-transform: rotate(10deg);
                -moz-transform-origin: top center;
                transform: rotate(10deg);
                transform-origin: top center;
            }
            100% {
                -webkit-transform: rotate(-10deg);
                -webkit-transform-origin: top center;
                -moz-transform: rotate(-10deg);
                -moz-transform-origin: top center;
                transform: rotate(-10deg);
                transform-origin: top center;
            }
        }
    </style>
</head>
<body>
<div style=" overflow:hidden; width:0px; height:0; margin:0 auto; position:absolute; top:-800px;"><img src="http://zb.qianhaivr.cn/images/share_icon.jpg"></div>

<div class="container-fluid" id="bgs">
    <div class="row"><img src="/images/bg1_1.png" class="img-responsive bg"></div>
    <div class="row"><img src="/images/bg1_2.png" class="img-responsive bg"></div>
    <div class="row"><img src="/images/bg1_3.png" class="img-responsive bg"></div>
    <div class="row relative">
        <img src="/images/bg1_4.png" class="img-responsive bg">
        <div class="absolute" id="sleep1">
            <img src="/images/sleep1.png" class="img-responsive sleep">

            <div class="col-xs-12" id="video-box">
                <video src="/video/play.mp4" id="video" poster="/images/preview.jpg" preload webkit-playsinline></video>
            </div>
        </div>
    </div>

    <div class="row relative">
        <img src="/images/bg1_5.png" class="img-responsive bg">

        <div class="absolute" id="sleep2">
            <img src="/images/sleep2.png" class="sleep">
        </div>
    </div>

    <div class="row relative">
        <img src="/images/bg1_6.png" class="img-responsive bg">

        <div id="live-links">
            <a href="javascript:void(0);" data-href="/live1.html" data-live="1" class="col-xs-6 live-link">&nbsp;</a>
            <a href="javascript:void(0);" data-href="/live2.html" data-live="2" class="col-xs-6 live-link">&nbsp;</a>
        </div>
    </div>

    <div class="row"><img src="/images/bg1_7.png" class="img-responsive bg"></div>

    <div class="row relative">
        <img src="/images/bg1_8.png" class="img-responsive bg">

        <div class="absolute" id="sleep3">
            <img src="/images/sleep3.png" class="sleep">
        </div>
    </div>

    <div class="row"><img src="/images/bg1_9.png" class="img-responsive bg"></div>
    <div class="row"><img src="/images/bg1_10.png" class="img-responsive bg"></div>
    <div class="row"><img src="/images/bg1_11.png" class="img-responsive bg"></div>

    <div class="row relative" id="cardnum-box">
        <img src="/images/bg1_12.png" class="img-responsive bg">

        <div class="absolute">
            <input id="ipt-cardnum" type="number" placeholder=" 请输入卡号">
            <div id="btn-submit"></div>
        </div>

        <div class="hide" id="notices">
            <img src="/images/alert-end.png" class="img-responsive end">
            <img src="/images/alert-error.png" class="img-responsive error">
            <img src="/images/alert-repeat.png" class="img-responsive repeat">
            <img src="/images/alert-success.png" class="img-responsive success">
        </div>
    </div>

    <div class="row"><img src="/images/bg1_13.png" class="img-responsive bg"></div>

    <div class="row"><img src="/images/bg1_14.png" class="img-responsive bg"></div>

    <div id="jump-links">
        <div class="row">
            <img src="/images/bottombuttons.png" class="img-responsive bg">

            <div class="absolute">
                <div class="col-xs-6 jump-link" data-stat="link1">&nbsp;</div>
                <div class="col-xs-6 jump-link" data-link="http://dxinlan.com/qcsfp/index_web.php" data-stat="link2">&nbsp;</div>
            </div>
        </div>
    </div>

</div>

<div class="hide" id="live-notice-box">
    <img src="/images/live-notice.png" class="img-responsive deny">
    <img src="/images/live-notice-wap.png" class="img-responsive wap">
</div>

<div id="share" class="hide" style="position:relative;">
    <div class="modal-backdrop in" style="z-index: 10; opacity: 0.8;"></div>
    <img src="/images/share_1.png" style="max-width: 80%; position: fixed; right: 15px; top: 0; z-index: 999;">
</div>

<div id="share-wap" class="hide" style="position: relative;">
    <div class="modal-backdrop in" style="z-index: 10; opacity: 0.8;"></div>
    <img src="/images/share_2.png" style="max-width: 80%; position: fixed; right: 15px; top: 0; z-index: 999;">
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        appId: '<?php echo $wxConfig['appId'];?>',
        timestamp: '<?php echo $wxConfig['timestamp'];?>',
        nonceStr: '<?php echo $wxConfig['nonceStr'];?>',
        signature: '<?php echo $wxConfig['signature'];?>',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
    wx.ready(function(){
        wx.onMenuShareAppMessage({
            title: '<?php echo $share['title']; ?>', // 分享标题
            desc: '<?php echo $share['desc']; ?>', // 分享描述
            imgUrl: 'http://zb.qianhaivr.cn/images/share_icon.jpg' // 分享图标
        });
    });
</script>

<div style="display:none;"><script type="text/javascript" src="//s.union.360.cn/73841.js"></script></div>
<div style="display:none;">
    <?php echo '<img src="'._cnzzTrackPageView(1260885907).'" width="0" height="0"/>';?>
</div>
</body>
</html>